import React from "react";
import { useState,useEffect } from "react";
import './modal.css'
/**
 * 
 * @param {visible boolean} props 控制显示
 * @returns 
 */
const Modal = (props) => {
    // 解构属性值
    const { visible:show,children,title } = props;
    // 解构函数
    const { onClose,onConfirm} = props;
    const [visible,setVisible] = useState(false);
    useEffect(()=>{
        setVisible(show);
    },[show])
    const closeModal = () => {
        console.log('想要关闭吗');
        setVisible(false);
        onClose && onClose();
    }
    const confirm = () => {
        console.log('想要确定吗？');
        setVisible(false);
        onConfirm && onConfirm();
    }
    const maskClick = () => {
        setVisible(false);
        onClose && onClose();
    }
    return (
        visible && <div className="modal-wrapper">
            <div className="modal">
                <div className="modal-title">{title}</div>
                <div className="modal-content">{children}</div>
                <div className="modal-operator">
                    <button className="modal-operator-close" onClick={closeModal}>取消</button>
                    <button className="modal-operator-confire" onClick={confirm}>确实</button>
                </div>
            </div>
            <div className="mask" onClick={maskClick}></div>
        </div>
    )
}

export default Modal;